import React from 'react';
import { Card, Badge, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const CourseCard = ({ course, onSelect, isSelected, buttonText }) => {
  const { id, 课程编号, 课程名称, 教师姓名, 学分, 平均得分难度, 平均水课程度 } = course;

  const renderScore = (score) => {
    if (!score && score !== 0) return 'N/A';
    return `${score.toFixed(1)} / 10`;
  };

  return (
    <Card className="h-100">
      <Card.Body>
        <Card.Title>{课程名称}</Card.Title>
        <Card.Subtitle className="mb-2 text-muted">
          课程编号: {课程编号} | 教师: {教师姓名}
        </Card.Subtitle>
        <Card.Text>
          <Badge bg="primary" className="me-2">学分: {学分}</Badge>
          <div className="mt-2">
            <Badge bg="info" className="me-2">水课程度: {renderScore(平均水课程度)}</Badge>
            <Badge bg="info">得分高低: {renderScore(平均得分难度)}</Badge>
          </div>
        </Card.Text>
        <div className="d-flex justify-content-between">
          <Button
            as={Link}
            to={`/courses/${id}`}
            variant="outline-primary"
            size="sm"
          >
            详情
          </Button>
          {onSelect && (
            <Button
              variant={isSelected ? "danger" : "success"}
              size="sm"
              onClick={() => onSelect(course)}
            >
              {buttonText || (isSelected ? '退选' : '选课')}
            </Button>
          )}
        </div>
      </Card.Body>
    </Card>
  );
};

export default CourseCard; 